<template>
  <div class="vue-box">
    <div class="c-panel">
		<el-row>
			<el-col :span="24" :xs="24">
				<!-- 模糊查询 -->
				<el-form :inline="true" size="small">
					<el-form-item label="公告标题：">
						<el-input type="text" size="small" v-model="query.title" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item label="创建时间：">
						<el-date-picker type="date" size="small" v-model="query.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker type="date" size="small" v-model="query.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
					</el-form-item>
				</el-form>
				<!-- 全局功能按钮 -->
				<el-row :span="24">
					<el-col :span="1.5" class="firstBtn">
						<el-button type="success" plain size="small" icon="el-icon-plus"
                       @click="state.dialogVisible=true,state.displayType='add'">新增</el-button>
					</el-col>
          <el-col :span="1.5" class="btn">
            <el-button type="info" plain size="small" icon="el-icon-refresh" @click="query.pageNo = 1; f5('')">重置</el-button>
          </el-col>
					<div style="text-align:right;margin-right:5px">
						<span class="span-box">
							<el-tooltip style="diaplay:inline" effect="dark" content="状态标签快速选择，不同于之前模块的快速筛选，该功能只会对当前数据的状态进行筛选而非全部数据" placement="top">
								<i class="el-icon-question" />
							</el-tooltip>
						</span>
						<el-radio-group v-model="codeRadio" size="small" @input="codeSelect">
							<!--不想给定默认值，但是不给报错，就整个不展示的选项-->
							<el-radio-button v-if="false" label=""></el-radio-button>
							<el-radio-button label="已发布">已发布</el-radio-button>
							<el-radio-button label="草稿">草稿</el-radio-button>
						</el-radio-group>
					</div>
				</el-row>
				<!-- 数据列表 -->
				<el-table :data="tableData" ref="multipleTable" style="width: 100%" v-loading="state.loading" size="medium">
					<el-table-column label="编号" type="index" width="80"></el-table-column>
					<el-table-column label="公告标题"  prop="title" width="400"></el-table-column>
					<el-table-column label="公告类别"  prop="type" width="120">
						<template slot-scope="scope">
							<el-tag :type="scope.row.type === '已发布' ? 'primary' : 'success'"
							disable-transitions>{{scope.row.type}}</el-tag>
						</template>
					</el-table-column>
          <el-table-column label="创建人"  prop="createBy" width="150"></el-table-column>
					<el-table-column label="创建日期"  prop="createTime" width="180"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="s">
              <el-button type="warning" size="mini"
                         :disabled="s.row.type == '已发布'" @click="info=s.row,edit()">
                <i class="el-icon-edit el-icon--left"></i>修改</el-button>
              <el-button type="danger" size="mini" @click="state.delDialogVisible=true,info=s.row">
                <i class="el-icon-delete el-icon--left"></i>删除</el-button>
            </template>
					</el-table-column>
				</el-table>
				<!-- 对话框相关 -->
        <el-dialog title="公告管理" :visible.sync="state.dialogVisible" :modal-append-to-body='false'
                   top='4vh' v-if="state.dialogVisible" width="65%">
          <noticeInfo :info="JSON.stringify(info)" :displayType="state.displayType"></noticeInfo>
        </el-dialog>
				<el-dialog title="删除提示" :visible.sync="state.delDialogVisible" :modal-append-to-body='false' 
				width="30%" :before-close="handleClose">
						<span>确定删除选择的公告记录？</span>
						<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="del()">确 定</el-button>
						<el-button @click="state.delDialogVisible=false">取 消</el-button>
						</span>
				</el-dialog>
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="query.pageNo" 
						:page-size.sync="query.pageSize" 
						:total="dataCount" 
						:page-sizes="[1, 5, 10, 20, 30, 100]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
  </div>
</template>

<script>
import NoticeInfo from "@/sa-view/notice/notice-info";
  export default {
    components: {NoticeInfo},
    data() {
      return {
		    //查询参数
        query:{
          title:"",
          createBy:"",
          startTime: '',
          endTime: '',
          pageNo: 1,
          pageSize: 10,
        },
        //列表数据
        tableData: [],
        info:'',//当前操作数据
        dataCount:0,//数据总数
        codeRadio:'',//快速筛选类型标签值
        state:{
          loading:false,
          delDialogVisible:false,
          dialogVisible:false,
          displayType:''//控制展示是新增页还是修改页
        }
      }
    },
    methods: {
		//列表刷新
		f5(param){
			this.state.loading=true;
      //初始化页面结束后，除重置外，查询都是带参数的，初始化页面带不带参数无所谓，因为初始的查询参数就没条件
      let params=param===undefined?this.query:param;
      this.request('/api/notice/list',params).then(res=>{
        if(!res){return}
        //console.log(res)
        this.tableData=res.data.records
        //如果是重置触发f5，则把查询参数重置
        if(params==''){
          this.query={pageNo:1,pageSize:10}
          this.codeRadio=''
        }
      })
      this.state.loading=false;
		},
    edit(){
      this.state.dialogVisible=true
      this.state.displayType='edit'
    },
    //删除公告
    del(){
      let params={id:this.info.id}
      this.request('/api/notice/del',params).then(res=>{
        if(!res){return}
        this.zm.ok("删除公告成功")
        this.state.delDialogVisible=false
        this.$bus.$emit("queryNoReadNotice")
        this.f5()
      })
    },
    codeSelect(){
      this.tableData=this.tableData.filter((item)=>{
        return item.type==this.codeRadio
      })
    },
    //新增and修改公告的回调
    addNotice(){
      this.state.dialogVisible=false
      this.f5()
    },
		//对话框取消
		handleClose(done) {
			done();
		}
	},
	mounted(){
		this.f5()
    this.$bus.$on("addNotice",this.addNotice)
    //取消修改的回调绑定
    this.$bus.$on("noUpdate",()=>{
      this.state.dialogVisible=false
    })
	}
}
</script>

<style scoped>
/**模糊查询字体样式 */
/deep/.c-panel .el-form-item__label, .c-panel .c-label {
	font-size:14px;
	font-weight:900
}

/*表格样式 */
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-15px
}
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
}
/*分页左移10px */

</style>